fix(label): allow text to truncate #5364

mattnolting · 2023-02-02T15:05:36Z

This PR: Closes #4795

Variables

Adds:

--pf-c-label--MaxWidth
--pf-c-label__text--m-truncate--MaxWidth

patternfly-build · 2023-02-02T15:12:52Z

Preview: https://patternfly-pr-5364.surge.sh

A11y report: https://patternfly-pr-5364-a11y.surge.sh

mcoker

Seems like there was a modifier added to truncate, but the issue was to truncate labels by default. Did that change? The labels that say the text should truncate do not truncate

src/patternfly/components/Label/label.hbs

mcoker · 2023-02-16T23:51:14Z

src/patternfly/components/Label/label.scss

@@ -410,12 +415,15 @@
  @include pf-text-overflow;

  max-width: var(--pf-c-label__text--MaxWidth);
+
+  &.pf-m-truncate {


Is the issue no longer to truncate labels by default?

@mcoker This issue is still to truncate labels by default, but do so when the label runs out of room rather than at {x}ch width.

Perhaps the predefined width truncation pf-m-truncate modifier would be implemented by simply updating --pf-c-label__text--MaxWidth.

got it. Should this class be on .pf-c-label tho?

src/patternfly/components/Label/label.hbs

mcoker

A couple of comments, but otherwise LGTM. We do need to update the examples in some way since there is a label in each example block that says it will truncate. I don't know if we add .pf-m-truncate to those examples, or have a new example block that shows truncation? Seems like the former is the easiest and matches what we have now.

Also added @mceledonia @mcarrano @mmenestr to double check the proposed change is good. This will allow labels to be as big as they need to be based on their content, and will only truncate if the label runs out of space in the layout.

mcoker · 2023-02-28T01:24:38Z

src/patternfly/components/Label/label-editable-content.hbs

+    type="text"
+    value="{{label-editable-content--value}}"
+  {{else}}
+    currvalue="{{label-editable-content--value}}"


out of scope but I don't understand what this does? It's in the docs, but it isn't a valid html attr and isn't used in react. I don't think you need it - you'd just update the button text with the input value.

patternfly/src/patternfly/components/Label/examples/Label.md

Line 89 in bef7344

- Change `.pf-c-label__editable-text` back from an input to a button and set the `currvalue` of the button to the contents of the input

mcoker · 2023-02-28T01:27:09Z

src/patternfly/components/LabelGroup/examples/LabelGroup.md

@@ -14,25 +14,25 @@ cssPrefix: pf-c-label-group
      {{#> label-group-list-item}}
        {{#> label}}
          {{#> label-icon}}
-            <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
+            <i class="fas fa-fw fa-info-circle" aria-hiddent></i>


mcoker · 2023-02-28T01:39:31Z

src/patternfly/components/Label/examples/Label.md

@@ -699,7 +123,7 @@ This style of label is used to add new labels to a label group.
 | `.pf-c-label` | `<span>`, `<button>` | Initiates a label. Without a color modifier, the label's default style is grey. Use a color modifier to change the label color. Use a `<button>` if the label is an overflow label used in the label group. **Required** |
 | `.pf-c-label__content` | `<span>`, `<a>`, `<button>` | Iniates a label content. Use as an `<a>` element if the label serves as a link. Use a `<button>` if the label serves as an action. **Required** |
 | `.pf-c-label__icon` | `<span>` | Initiates a label icon. |
-| `.pf-c-label__text` | `<span>` | Initiates label text. |
+| `.pf-c-label__text` | `<span>` | Initiates label text. **Required** |
 | `.pf-c-label__editable-text` | `<button>`, `<input>` | Initiates editable label text. See the [editable](#editable) example for details about handling behavior in Javascript.|
 | `.pf-m-outline` | `.pf-c-label` | Modifies label for outline styles. |
 | `.pf-m-compact` | `.pf-c-label` | Modifies label for compact styles. |


need to add .pf-m-truncate

mcoker · 2023-02-28T01:45:56Z

src/patternfly/components/Label/label.scss

@@ -410,12 +415,15 @@
  @include pf-text-overflow;

  max-width: var(--pf-c-label__text--MaxWidth);
+
+  &.pf-m-truncate {


got it. Should this class be on .pf-c-label tho?

mcarrano

@mattnolting @mcoker Just a couple of questions to clarify what is happening here. I'm reading this as follows. Please confirm that this is correct.

By default, labels will grow to the width of their content unless or until they are constrained by the layout or container that they live in. If there is not enough room to show all the content, that content will truncate. We're also adding a modifier to allow setting a max width of the label, in which case the content will truncate if it exceeds that length.

Do I understand this correctly? If so, I am good with this but agree that we should show this somehow in our examples.

mmenestr · 2023-03-01T16:58:16Z

I agree with @mcarrano ^ LGTM

patternfly-build · 2023-03-01T23:23:05Z

🎉 This PR is included in version 5.0.0-alpha.22 🎉

The release is available on:

Your semantic-release bot 📦🚀

mattnolting force-pushed the fix-label-4795 branch from 9ed05b5 to 61726fc Compare February 8, 2023 15:11

mattnolting requested review from mcoker and srambach and removed request for mcoker February 8, 2023 16:18

mattnolting marked this pull request as ready for review February 8, 2023 16:19

mattnolting force-pushed the fix-label-4795 branch 2 times, most recently from 3d2cbff to c7b9857 Compare February 8, 2023 16:24

nicolethoen linked an issue Feb 9, 2023 that may be closed by this pull request

Bug - Label - Labels break out of container with long strings of text #4795

Closed

mattnolting requested a review from mcoker February 15, 2023 15:44

mcoker reviewed Feb 16, 2023

View reviewed changes

mattnolting force-pushed the fix-label-4795 branch from c7b9857 to d88eec7 Compare February 22, 2023 20:29

mcoker requested review from mcarrano, mceledonia and mmenestr February 28, 2023 01:37

mcoker requested changes Feb 28, 2023

View reviewed changes

mcarrano reviewed Feb 28, 2023

View reviewed changes

mattnolting force-pushed the fix-label-4795 branch 2 times, most recently from f643f0c to baff98a Compare March 1, 2023 10:06

mattnolting and others added 4 commits March 1, 2023 16:43

fix(label): allow text to truncate

a9b70ff

fix(label): updated partial bools and rebased

2c6c05b

fix(label): updated hbs props

8edc55c

chore(label): removed dupe display flex, documented maxwidth var

f858389

mcoker force-pushed the fix-label-4795 branch from baff98a to f858389 Compare March 1, 2023 22:54

mcoker approved these changes Mar 1, 2023

View reviewed changes

mcoker merged commit ac761d5 into patternfly:v5 Mar 1, 2023

patternfly-build added the released on @alpha label Mar 1, 2023

mattnolting added a commit to mattnolting/patternfly that referenced this pull request Mar 2, 2023

fix(label): allow text to truncate (patternfly#5364)

cd0baa7

mattnolting added a commit to mattnolting/patternfly that referenced this pull request May 18, 2023

fix(label): allow text to truncate (patternfly#5364)

ead8d21

mattnolting added a commit to mattnolting/patternfly that referenced this pull request Dec 12, 2023

fix(label): allow text to truncate (patternfly#5364)

d9b8aee

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(label): allow text to truncate #5364

fix(label): allow text to truncate #5364

mattnolting commented Feb 2, 2023 •

edited

patternfly-build commented Feb 2, 2023 •

edited

mcoker left a comment

mcoker Feb 16, 2023

mattnolting Feb 22, 2023

mcoker Feb 28, 2023

mcoker left a comment

mcoker Feb 28, 2023

mcoker Feb 28, 2023

mcoker Feb 28, 2023

mcoker Feb 28, 2023

mcarrano left a comment

mmenestr commented Mar 1, 2023

patternfly-build commented Mar 1, 2023

fix(label): allow text to truncate #5364

fix(label): allow text to truncate #5364

Conversation

mattnolting commented Feb 2, 2023 • edited

Variables

patternfly-build commented Feb 2, 2023 • edited

mcoker left a comment

Choose a reason for hiding this comment

mcoker Feb 16, 2023

Choose a reason for hiding this comment

mattnolting Feb 22, 2023

Choose a reason for hiding this comment

mcoker Feb 28, 2023

Choose a reason for hiding this comment

mcoker left a comment

Choose a reason for hiding this comment

mcoker Feb 28, 2023

Choose a reason for hiding this comment

mcoker Feb 28, 2023

Choose a reason for hiding this comment

mcoker Feb 28, 2023

Choose a reason for hiding this comment

mcoker Feb 28, 2023

Choose a reason for hiding this comment

mcarrano left a comment

Choose a reason for hiding this comment

mmenestr commented Mar 1, 2023

patternfly-build commented Mar 1, 2023

mattnolting commented Feb 2, 2023 •

edited

patternfly-build commented Feb 2, 2023 •

edited